<!--
 * @Author: your name
 * @Date: 2021-04-17 10:36:24
 * @LastEditTime: 2021-04-19 15:18:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \智慧医疗项目\app\src\views\pages\account\account.vue
-->
<template>
  <div class="account">
    <div class="head">
      <button @click="doctorBtnClick" :class="this.activeFlag?'':'active'">医生</button>
      <button @click="patirntBtnClick" :class="this.activeFlag?'active':''">患者</button>
    </div>
    <DataTab :data="this.activeFlag?'患者':'医生'"></DataTab>
  </div>
</template>

<script>
import DataTab from './DataTab'
export default {
  components:{
    DataTab
  },
  data(){
    return {
      activeFlag:false
    }
  },
  methods:{
      doctorBtnClick(){
        this.activeFlag=false
        console.log("6653")
      },
      patirntBtnClick(){
        this.activeFlag=true

      }
  }
}
</script>

<style lang="scss" scoped>
  .account{
    width: 100%;
    height: 100%;
    .head{
      border-bottom: 3px solid rgb(4, 184, 255);
      padding: 0;
      button{
        background-color: #fff;
        padding: 3px 8px;
        color: rgb(4, 184, 255);
        border: 1px solid rgb(4, 184, 255);
      }
      .active{
        background-color:rgb(4, 184, 255);
        color: #fff;
      }
    }
  }
</style>